<template>
  <div>
    <ul class="img-list">
      <li class="item" v-for="photo in photo_list" :key="photo.photo_id">
        <!-- 图片 -->
        <div class="img-box">
          <el-image :src="photo.thumb_w_url_cos" fit="cover"></el-image>
        </div>
        <!-- 文字 -->
        <p class="img-name">{{ photo.title }}</p>
        <div class="mask"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["photo_list"],
};
</script>

<style lang="scss" scoped>
.img-list {
  display: flex;
  flex-wrap: wrap;
  .item {
    position: relative;
    width: 24.2%;
    padding-top: 20%;
    margin: 0 0.4%;
    margin-bottom: 0.8%;
    overflow: hidden;
    cursor: pointer;
    &:hover {
      .img-box {
        transform: scale(1.03);
      }
      .mask {
        opacity: 1;
      }
    }
    .img-box {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 0.3s;
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .img-name {
      z-index: 99;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      color: #fff;
    }
    .mask {
      opacity: 0;
      transition: all 0.3s;
      z-index: 9;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
